<!--
 * @Author: wangzm
 * @Date: 2020-01-16 14:36:31
 * @LastEditors: wjk
 * @LastEditTime: 2020-08-31 17:09:57
 * @Description: goods-item
 -->
<template>
  <view :class="'c-goods-item ' + layout + ' ' + size + ' ' + className" @click="handleClick">
    <view class="goods-img" :style="'width: ' + imageWidth + ';height:0;padding-bottom:' + imageWidth + ';border-radius:' + imageRadius">
      <view class="img-container">
        <b-image :src="goodsData.pic || goodsData.goods_image_url" mode="aspectFit" />
        <image v-if="showTag && goodsData.tag_img" :src="goodsData.tag_img" class="tag-img" :style="'width: ' + tagWidth" mode="widthFix" />
        <image v-if="goodsData.status === 1" src="/static/images/common/img_status_1.png" class="status-img" mode="aspectFit" />
        <image v-else-if="goodsData.status === 2" src="/static/images/common/img_status_2.png" class="status-img" mode="aspectFit" />
        <image v-else-if="goodsData.status === 4" src="/static/images/common/img_status_4.png" class="status-img" mode="aspectFit" />
        <image v-else-if="goodsData.status === 5" src="/static/images/common/img_status_5.png" class="status-img" mode="aspectFit" />
      </view>
    </view>
    <view class="goods-detail">
      <view class="block-up">
        <view class="goods-name" :class="'goods-name_line' + nameLine">
          <view v-if="goodsData.tag" class="goods-name_tag">{{ goodsData.tag }}</view>
          {{ goodsData.title || goodsData.goods_name }}
        </view>
        <!-- <view v-if="showSubName && goodsData.subtitle" class="goods-sub-name">{{ goodsData.subtitle }}</view> -->
        <view v-if="goodsData.properties_name" class="goods-property">{{ goodsData.properties_name }}</view>
        <view v-if="goodsData.sku" class="goods-property">{{ goodsData.sku }}</view>
        <view v-if="layout === 'horizontal' && goodsData.volume && goodsStatus === 6" class="goods-volume">销量{{ goodsData.volume ? goodsData.volume : 0 }}</view>
      </view>
      <view class="block-down">
        <view class="block-down-left">
          <template v-if="goodsData.vip_price">
            <text class="goods-price main-price"><text v-if="goodsData.type!=35" class="price-icon">￥</text>{{ goodsData.vip_price | formatMoney }}</text>
            <text v-if="layout === 'horizontal' && fromType !== 'likeList' && fromType != 'package' && fromType !== 'partner'" class="goods-price market-price">
              <text v-if="goodsData.type!=35" class="price-icon">￥</text>{{ goodsData.price | formatMoney }}
            </text>
          </template>
          <template v-else-if="goodsData.marketValue">
            <template v-if="showMarketPrice">
              <text v-if="goodsData.price >= 0" class="goods-price main-price"><text v-if="goodsData.type!=35" class="price-icon">￥</text>{{ goodsData.price | formatMoney }}</text>
              <text class="goods-price market-price"><text v-if="goodsData.type!=35" class="price-icon">￥</text>{{ goodsData.marketValue | formatMoney }}</text>
            </template>
            <template v-else>
              <template v-if="layout === 'horizontal'">惊喜价</template>
              <text v-if="goodsData.price >= 0" class="goods-price main-price"><text v-if="goodsData.type!=35" class="price-icon">￥</text>{{ goodsData.price | formatMoney }}</text>
            </template>
          </template>
          <template v-else>
            <text v-if="goodsData.price && needEmptyPrice" class="goods-price"><text v-if="goodsData.type!=35" class="price-icon">￥</text>{{ goodsData.price | formatMoney }}</text>
            <text v-if="layout === 'horizontal' && goodsData.marketPrice && fromType !== 'likeList' && fromType != 'package' && fromType !== 'partner'" class="goods-price market-price">
              <text v-if="goodsData.type!=35" class="price-icon">￥</text>{{ goodsData.marketPrice | formatMoney }}
            </text>
          </template>
        </view>
        <view v-if="fromType === 'partner'" class="block-down-right">
          <view v-if="goodsData.piece_number" class="goods-number">{{ goodsData.piece_number }}</view>
        </view>
        <view v-else class="block-down-right">
          <view v-if="selectProducts" @click.stop="optionChecked(goodsData)">
            <text :class="{ checkedFlag: checkedFlagList.indexOf(goodsData.goodsId) > -1 }" class="o-span"></text>
          </view>
          <view v-else-if="goodsStatus > -1 && btnTextArray[goodsStatus]" class="goods-btn" :class="'goods-btn-state' + goodsStatus">{{ btnTextArray[goodsStatus] }}</view>
          <view v-else-if="goodsData.num" class="goods-number">{{ goodsData.num }}</view>
        </view>
      </view>
      <view v-if="deletType" class="closeBtnBox" @click.stop="deleteListState">
        <image class="closeBtn" src="@/static/images/icon/icon_close.png"></image>
      </view>
    </view>
  </view>
</template>
<script>
import { toGoods } from '@/utils/navigateTo'
import { mapState } from 'vuex'
export default {
  name: 'GoodsItem',
  props: {
    className: { type: String, default: '' }, // 自定义样式类名
    layout: { type: String, default: 'horizontal' }, // horizontal: 左右布局， vertical：上下布局
    size: { type: String, default: 'normal' }, // normal: 正常尺寸， middle：中等尺寸， large：大尺寸【vertical：上下布局时有效】
    imageWidth: { type: String, default: '182rpx' }, // 商品图片宽度
    imageRadius: { type: String, default: '20rpx' }, // 商品图片圆角
    showTag: { type: Boolean, default: true }, // 是否显示标签
    tagWidth: { type: String, default: '92rpx' }, // 标签图片宽度
    nameLine: { type: Number, default: 2 }, // 商品名称显示几行
    showSubName: { type: Boolean, default: true }, // 是否显示商品副标题
    showMarketPrice: { type: Boolean, default: true }, // 是否显示划线价格
    needNavigate: { type: Boolean, default: true }, // 是否点击跳转商品详情
    needEmptyPrice: { type: Boolean, default: true }, // 是否不显示商品价格
    goodsStatus: { type: Number, default: -1 }, // 0：马上抢、3：马上抢、4：已抢光、5：已下架、6：立即购买、7：准备抢【目前暂时只是首页和搜索用到这个字段】
    goodsData: {
      type: Object,
      default() {
        return {
          pic: '', // 商品图片
          tag: '', // 商品类型 ['', '套餐', '赠品'] // 待补充
          title: '', // 商品名称
          subtitle: '', // 商品副标题
          properties_name: '', // 商品属性名称
          volume: '', // 商品销量
          price: '', // 商品价格
          marketPrice: '', // 商品划线价格
          num: '', // 商品数量
          status: '', // 商品状态number类型 [''(0),'待售'(1),'预售'(2), ''(3), '售罄'(4), '下架'(5)] // 待完善
          isCheck: false
        }
      }
    },
    fromType: {
      type: String,
      default: ''
    },
    selectProducts: {
      type: String,
      default: ''
    },
    deletType: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      btnTextArray: ['马上抢', '马上抢', '马上抢', '马上抢', '已抢光', '已下架', '立即购买', '准备抢'],
      selectTrue: false,
      checkedFlagList: []
    }
  },
  computed: {
    ...mapState(['optionState'])
  },
  created() {
    this.checkedFlagList = this.optionState.map(item => {
      return item.goodsId
    })
  },
  methods: {
    deleteListState() {
      this.$store.commit('DELETE_LIST', this.goodsData)
    },
    optionChecked(item) {
      this.goodsData.isCheck = !this.goodsData.isCheck
      this.selectTrue = !this.selectTrue
      this.$nextTick(() => {
        if (this.optionState.length > 4 && this.goodsData.isCheck === true) {
          uni.showToast({
            title: '商品不得超过5',
            icon: 'none',
            duration: 2000
          })
          this.goodsData.isCheck = false
          this.selectTrue = false
          return
        }
        if (this.goodsData.isCheck === true) {
          this.checkedFlagList.push(this.goodsData.goodsId)
        } else {
          this.checkedFlagList.splice(this.checkedFlagList.indexOf(this.goodsData.goodsId), 1)
        }
        this.$store.commit('PRODUCT_NUMBER', this.goodsData)
      })
    },
    // 商品点击
    handleClick() {
      console.log(this.goodsData)
      if (this.needNavigate) {
        toGoods(this.goodsData)
      }
      this.$emit('click', this.goodsData)
    }
  }
}
</script>
<style lang="scss">
.c-goods-item {
  .goods-price {
    font-size: 24rpx;
    &.main-price {
      color: #000;
      font-size: 28rpx;
    }
    &.market-price {
      text-decoration: line-through;
      color: $color-tips;
      font-size: 24rpx;
      padding-left: 8rpx;
    }
    // &::before {
    //   content: '￥';
    //   font-size: 18rpx;
    // }
    .price-icon{
      font-size: 18rpx;
    }
  }
  .goods-btn {
    color: #fff;
    font-size: 26rpx;
    padding: 0 26rpx;
    font-weight: 400;
    line-height: 50rpx;
    border-radius: 25rpx;
    background: $color-theme;

    &.goods-btn-state7 {
      background: #6dbe35;
    }
    &.goods-btn-state6 {
      color: #000;
      font-size: 22rpx;
      padding: 0 16rpx;
      background: #fff;
      border: 1px solid #000;
      border-radius: 2rpx;
    }
    &.goods-btn-state5,
    &.goods-btn-state4 {
      background: #ccc;
    }
  }
  .goods-img {
    position: relative;
    overflow: hidden;
    .img-container {
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      position: absolute;
      z-index: 0;
    }
    .tag-img {
      top: 0;
      left: 0;
      width: 92rpx;
      height: 0;
      position: absolute;
      z-index: 2;
    }
    .status-img {
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      width: 60%;
      height: 60%;
      margin: auto;
      position: absolute;
      z-index: 2;
    }
  }
  .goods-detail {
    @include flex(column);
    @include j-between;
  }
  .goods-name {
    font-size: 24rpx;
    line-height: 34rpx;
    .goods-name_tag {
      color: #fff;
      font-size: 20rpx;
      line-height: 28rpx;
      padding: 0 10rpx;
      border-radius: 14rpx;
      background: $color-theme;
      display: inline-block;
      vertical-align: baseline;
      margin-right: 10rpx;
    }
    &.goods-name_line1 {
      @include text-ellipsis;
      height: 34rpx;
    }
    &.goods-name_line2 {
      @include text-ellipsis-line;
      height: 68rpx;
      white-space: pre-wrap;
      color: #999;
    }
  }
  .goods-sub-name {
    @include text-ellipsis;
    color: #9296a5;
    font-size: 24rpx;
    line-height: 36rpx;
    height: 36rpx;
  }
  .goods-property {
    color: #9296a5;
    font-size: 24rpx;
    padding-top: 10rpx;
  }
  .goods-volume {
    color: #999999;
    font-size: 22rpx;
    padding-top: 12rpx;
  }
  .goods-number {
    &::before {
      content: 'x';
      font-size: 20rpx;
    }
  }
  .block-down {
    @include flex;
    @include j-between;
  }

  &.horizontal {
    @include flex;

    .goods-detail {
      @include sub-item;
      margin-left: 20rpx;
    }
  }
  &.vertical {
    .main-price {
      color: #000;
    }
    .block-down {
      @include j-center;
    }
    &.normal {
      .goods-name {
        margin: 20rpx 0 24rpx;
      }
      .main-price {
        font-size: 28rpx;
        font-weight: bold;
      }
      .market-price {
        font-size: 22rpx;
      }
    }
    &.middle {
      .goods-name {
        font-size: 30rpx;
        margin: 16rpx 0;
      }
      .main-price {
        font-size: 34rpx;
      }
      .market-price {
        font-size: 26rpx;
      }
    }
    &.large {
      .goods-name {
        font-size: 32rpx;
        margin: 16rpx 0;
      }
      .main-price {
        font-size: 36rpx;
      }
      .market-price {
        font-size: 28rpx;
      }
    }
  }
  &.likeItem {
    .goods-detail {
      padding: 0 20rpx 20rpx;
    }
  }
}
.goodsPack {
  .goods-detail {
    position: relative;
  }
  .goods-property {
    position: absolute;
    bottom: 4rpx;
    left: 0;
  }
  .goods-price.main-price {
    position: absolute;
    bottom: 40rpx;
    font-size: 26rpx;
  }
}
.o-span {
  display: block;
  width: 36rpx;
  height: 36rpx;
  margin: 2rpx;
  background-image: url('/static/images/cart/icon_marquee_n.png');
  background-size: 100% 100%;
}
.checkedFlag {
  background-image: url('/static/images/cart/icon_marquee_selected_n.png');
}
.disable {
  background-image: url('/static/images/cart/icon_marquee_selected_n.png');
}
.goods-detail {
  position: relative;
  .closeBtnBox {
    position: absolute;
    top: 45%;
    right: 20rpx;
    width: 48rpx;
    height: 48rpx;
    .closeBtn {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      margin-left: 10rpx;
      width: 24rpx;
      height: 24rpx;
    }
  }
}
</style>
